import validate from 'wechat-validate'
import utils from '../../utils/utils'

Page({
  // 通过 behaviors 注入 validate 方法，类似vue的 mixins
  behaviors: [validate],
  data: {
    countDownVisible: false,
    phone: '',
    code: '',
  },
  rules: {
    phone: [
      { required: true, message: '请填写手机号码!' },
      { pattern: /^1[3-8]\d{9}$/, message: '请检查手机号码是否正确!' },
    ],
    code: [
      { required: true, message: '请填写短信验证码!' },
      { pattern: /^\d{6}$/, message: '请检查短信验证码是否正确!' },
    ],
  },
  // 知识点：【接收页面传递的地址栏参数】只需要在钩子函数上的参数接收即可
  onLoad(query) {
    console.log(query)
    // 知识点：小程序可以和vue一样用this直接挂载data数据，方便其他函数使用
    this.redirect = query.redirect
  },
  async onSubmit() {
    // 校验表单（插件会自动弹窗提示错误信息）
    const flag = this.validate()
    if (!flag) return
    const { phone, code } = this.data
    const res = await wx.http.post('/login', { mobile: phone, code })
    const app = getApp()
    app.setToken('token', res.data.token)
    app.setToken('refreshToken', res.data.refreshToken)
    // 跳转到上次打开页，登录成功必须用redirectTo才合理，因为不需要返回前一页
    wx.redirectTo({
      url: this.redirect,
    })
  },
  // 获取验证码
  async getAuthCode() {
    const { valid, message } = this.validate('phone')
    if (!valid) {
      return utils.showToast(message || '请检查输入是否正确!')
    }
    this.setData({
      // 显示倒计时组件
      countDownVisible: true,
    })
    const { data } = await wx.http.get('/code', { mobile: this.data.phone })
    console.log(data.code)
  },
  // 控制倒计时展示隐藏
  countDownChange(ev) {
    this.setData({
      timeData: ev.detail,
      //分钟数刚好为1，或者秒数大于0时，显示(或重新显示)倒计时组件
      countDownVisible: ev.detail.minutes === 1 || ev.detail.seconds > 0,
    })
  },
})
